<template>
  <div class="catalogue-view-page">
    <img class="catalogue-backgroud" src="./image/catalogue-view-image1.jpg" alt=""  @click="actionClickOpen">
    <div class="catalogue-close" @click="actionClickClose"></div>
    <ul class="catalogue-content flex-middle-x layout-flex-justify-content_center" v-if="catalogueListLength">
      <li v-for="(item,index) in catalogueList">
        <div @click="actionClickCatalogue(index)" v-if="item !== 0">
          {{item}}
        </div>
      </li>
    </ul>
    <ul class="catalogue-content flex-middle-x layout-flex-justify-content_center" v-else="">
      <li>
        <div>
          游戏结束
        </div>
      </li>
    </ul>
    <div class="music-content">
      <audio id="music1" :src="musicAudio" controls="controls" loop="loop">
      </audio>
    </div>
  </div>
</template>
<script>
  export default {
    name:'',
    data(){
      return {
        catalogueList:[],
        catalogueListLength:true,
        musicAudio:'https://i-shopping-beta.oss-cn-shanghai.aliyuncs.com/image/start.mp3'
      }
    },
    computed:{},
    methods:{
      actionClickClose(){
        var audio = document.getElementById('music1');
        audio.pause();
      },
      actionClickOpen(){
        var audio = document.getElementById('music1');
        audio.play();
      },
      actionClickCatalogue(index){
        this.catalogueList[index] = 0;
        window.sessionStorage.setItem('catalogueList', JSON.stringify(this.catalogueList));
        this.$router.push({name:'GameContentView', query:{gameIndex:index}})
      }
    },
    mounted(){
      this.catalogueList = JSON.parse(window.sessionStorage.getItem('catalogueList'));
      for (var i = 0; i < this.catalogueList.length; i++){
        if (this.catalogueList[i] !== 0){
          break;
        }
      }
      if (i === this.catalogueList.length){
        this.catalogueListLength = false;
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped="">
  .catalogue-view-page{
    .catalogue-backgroud{
      width:100%;
      height:100%;
      position: fixed;
      top:0;left:0;
      z-index:1;
    }
    .catalogue-content{
      width:100%;
      height:500px;
      position: fixed;
      top:-200px;left:0;right:0;bottom:0;
      margin:auto;
      z-index:2;
      flex-wrap: wrap;
      text-align: center;
      li{
        width:250px;
        height:250px;
        position: relative;
        margin-left:10px;
        div{
          width:250px;
          height:250px;
          border-radius: 50%;
          background:#02abfa;
          line-height:250px;
          position: absolute;
          top:0;left:0;right:0;bottom:0;
          margin:auto;
          cursor: pointer;
          font-size:40px;
          color:$color-4;
        }
        :hover{
          animation: tada 2s infinite linear 0s;
        }
      }
    }
  }
  .music-content{
    position: fixed;
    top:0;left:0;
    z-index:10000;
    font-size:30px;
    opacity: 0;
  }
  .catalogue-close{
    width:50px;
    height:50px;
    position: fixed;
    bottom:0;left:0;
    z-index:10001;
    background:red;
    font-size:30px;
    opacity: 0;
    border-radius:50%;
  }
</style>
